<template>
  <div>
    <Breadcrumb>
      <Breadcrumb-item href="/">首页</Breadcrumb-item>
      <Breadcrumb-item href="#">用户管理</Breadcrumb-item>
      <Breadcrumb-item href="/users">用户列表</Breadcrumb-item>
      <Breadcrumb-item>用户角色</Breadcrumb-item>
    </Breadcrumb>
    <div>

      <Form ref="formRole" :model="formRole" :rules="ruleValidate" :label-width="100">
        <Form-item label="用户" prop="username" v-if="id">
          <Row>
            <Col span="12">
              <Input v-model="username" readonly />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="角色" prop="userRoles">
          <div id="app-div">
            <Button type="primary" @click="handleAddRole">新增角色</Button>

            <Select v-model="role" style="width:360px" filterable>
              <Option v-for="item in roleList" :value="item.id" :key="item.id" >{{ item.name }}</Option>
            </Select>

            <h4>所属角色列表</h4>
            <Table border :context="self" :columns="roleColumns" :data="users.roles"></Table>
          </div>
        </Form-item>

        <Form-item>
          <Button type="ghost" @click="$router.back()">返回</Button>
        </Form-item>
      </Form>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'RoleForm',
  components: {
  },
  data () {
    return {
      id: '',
      username: '',
      formRole: {
        username: ''
      },
      ruleValidate: {
      },
      role: '',
      roleList: [],
      self: this,
      roleColumns: [
        {title: '角色', key: 'id'},
        {title: '名称', key: 'name'},
        {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.handleDel(params.row, params.index)
                  }
                }
              }, '删除')
            ])
          }
        }]
    }
  },
  computed: {
    ...mapState(['users', 'roles'])
  },
  watch: {
  },
  created () {
    this.id = this.$route.params.id
    this.id && this.get(this.id)
    this.username = this.id
    this.getRoleList()
  },
  methods: {
    get (id) {
      this.$store.dispatch('getUserRoles', {username: id})
    },
    show (index) {
    },
    handleDel (role, index) {
      this.$store.dispatch('deleteUserRole', {
        username: this.username,
        role: role.id
      })
    },
    getRoleList () {
      this.$store.dispatch('filterRoles', {}).then((data) => {
        this.roleList = data
      })
    },
    addUserRole (role) {
      this.$store.dispatch('addUserRole', {username: this.username, role}).then(() => {
        this.get(this.id)
      })
    },
    handleAddRole () {
      this.addUserRole(this.role)
    },
    resetFields () {
      this.$refs.formRole.resetFields()
    }
  }
}
</script>
